<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form inline>
        <el-form-item />
        <el-form-item label="">
          <el-select
            size="small"
            v-model="listQuery.module"
            default-first-option
            style="width: 180px"
            placeholder="所属模块"
            clearable
            @change="changeRole"
          >
            <el-option
              v-for="(item, index) in roleArr"
              :key="index"
              :label="item.module"
              :value="item.module"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-input
            v-model="listQuery.keyword"
            size="small"
            style="width: 300px"
            class="filter-item"
            placeholder="操作账号或操作内容"
            clearable
        /></el-form-item>
        <el-form-item label="">
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button>
          <!-- <el-button size="small" class="filter-item" type="primary" icon="edit" @click="showCreate()">添加</el-button> -->
          <!-- <el-button class="filter-item" style="margin-left: 10px;" @click="open(1)" type="primary" icon="edit">白名单IP</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="open(2)" type="primary" icon="edit">预约页面开关</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        key="tableKey"
        v-loading="listLoading"
        :data="adminList"
        element-loading-text="加载中"
        border
        fit
        stripe
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{
          background: '#E3ECFB',
          color: '#303133',
          fontWeight: '500'
        }"
      >
        <el-table-column align="center" label="编号" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作账号">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="created_at"
          label="操作时间"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="created_at"
          label="操作IP"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" sortable prop="module" label="模块">
          <template slot-scope="scope">
            <span> {{ scope.row.module }} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="动作">
          <template slot-scope="scope">
            <span> {{ scope.row.message }} </span>
          </template>
        </el-table-column>

        <el-table-column align="center" sortable prop="path" label="操作路由">
          <template slot-scope="scope">
            <span>{{ scope.row.path }} </span>
          </template>
        </el-table-column>

        <!-- <el-table-column align="center" label="系统编号">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->

        <el-table-column align="center" label="其他参数" width="120">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              :title="scope.row.method"
              width="200"
              trigger="hover"
              :content="scope.row.input"
            >
              <el-button plain size="small" type="info" slot="reference"
                >详情</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container text-right">
        <el-pagination
          background
          :total="pagination.total"
          :current-page="listQuery.page"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  logList,
  fetchRoleList,
  // fetchAdmin,
  changeAdmin,
  updateAdmin,
  addAdmin,
  resetAdmin
} from "@/api/manager";

export default {
  name: "Admin",
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      roleArr: null,
      adminList: [],
      dialogStatus: null,
      ip: "",
      btn: "0",
      pagination: {},
      listQuery: {
        page: 1,
        limit: 20
      },
      dialogTitle: "添加",
      listLoading: false,
      dialogFormVisible1: false
    };
  },
  created() {
    //获取日志列表
    this.getLogList();
  },
  methods: {
    getLogList() {
      this.listLoading = true;
      logList(this.listQuery).then(response => {
        this.adminList = response.data.list.data;
        this.roleArr = response.data.category;
        //console.log(this.adminList)
        this.pagination = response.data.list;
        this.listLoading = false;
      });
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getLogList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getLogList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getLogList();
    },

    //下拉选择变化
    changeRole(val) {
      // this.listQuery.category_idC = null
      //this.$set(this.listQuery, 'category_idC', null)
      logList({ module: val }).then(response => {
        //var data = response.data;
        this.adminList = response.data.list.data;
        //this.joinArr1 = data;
      });
    }
  }
};
</script>
